<template>
  <div class="home">
    <el-swiper :list="swiper" />
    <van-grid :border="false" :column-num="4">
      <van-grid-item to="/company?active=0" icon="orders-o" text="简介"  />
      <van-grid-item to="/company?active=1" icon="friends-o" text="专家"  />
      <van-grid-item to="/anli" icon="notes-o" text="案例"  />
      <van-grid-item to="/callme" icon="chat-o" text="联系"  />
    </van-grid>
    <van-divider />
    <van-cell icon="orders-o" title="服务群体" />
    <van-grid :border="false" :column-num="3">
      <van-grid-item :to="`/subject?dictType=${item.dictType}`"
                     v-for="(item,index) of service"
                     :key="item.dictId"
                     :text="item.dictName">
        <div class="dictIdicon" :style="`background-color:${bgc[index]}`">
          <van-icon :size="24" :name="icon[index]" />
        </div>
        <p style="font-size: 14px;color: #646566">{{item.dictName}}</p>
      </van-grid-item>
    </van-grid>
    <van-divider />
    <van-cell icon="orders-o" title="课程" />
    <div class="kecheng">
      <div v-for="(item,index) of course"
           @click="$router.push(`/kecheng?dictValue=${item.dictValue}`)"
           :key="item.dictCode">
        <van-icon size="28" name="records" />
        <p>{{item.dictLabel}}</p>
      </div>
    </div>
    <van-divider />
    <ul class="home-b">
      <li @click="active = 0"
          :class="{'active':active===0}">
        新闻
      </li>
      <li @click="active = 1"
          :class="{'active':active===1}">
        专业科普
      </li>
    </ul>
    <van-cell v-for="i of getnew"
              @click="$router.push(`/ndetail?id=${i.id}`)"
              :title="i.title"
              :value="i.createTime.slice(0,-9)"/>
    <van-empty v-if="!((getnew).length)" description="没有更多～" />

  </div>
</template>

<script>
import { getSwiper } from "@/api/swiper";
import { getService,getCourse} from "@/api";
import { getNews } from "@/api/news";

export default {
  name: 'Home',
  data(){
    return{
      active:0,
      swiper:[],
      service:[],
      course:[],
      news:[],
      kp:[],
      icon:[
          'chat-o',
          'shop-o',
          'smile-comment-o',
          'flower-o'
      ],
      bgc:[
          '#9c0',
          '#f90',
          '#39f',
          '#FFC107',
          '#E040FB',
          '#FF4081'
      ]
    }
  },
  computed:{
    getnew(){
      return this.active===0?this.news:this.kp
    }
  },
  created() {
    this.getList()
  },
  methods:{
    getList(){
      getSwiper().then(({records})=>{
        this.swiper = records
      })
      getService().then(res=>{
        console.log(res)
        this.service = res
      })
      getCourse().then(res=>{
        this.course = res
      })
      getNews({resourceClass:'xwzx',current:1,size:5}).then(res=>{
        // console.log(res)
        this.news = res.records
      })
      getNews({resourceClass:'zykp',current:1,size:5}).then(res=>{
        // console.log(res)
        this.kp = res.records
      })
    }
  }
}
</script>
<style scoped>
.van-cell__title{
  width: 84%;
}
.kecheng{
  display: flex;
  flex-wrap: wrap;
  background-image: url(http://m.ostcn.com/static/img/course-ab.786ed16.png);
}
.kecheng>div{
  width: 50%;
  height: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  /*color: var(--theme);*/
  color: #99CC00;
}
.home-b{
  display: flex;
  justify-content: space-evenly;
  padding: 10px 0;
}
.home-b>.active{
  color: var(--theme);
}
.dictIdicon{
  width: 46px;
  height: 46px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  color: white;
}

</style>
